{% extends 'backstage/root/manage_competition/base.html' %}
{% from 'bootstrap/form.html' import render_form %}

{% block competition_content %}
    <div class="btn-group btn-group-vertical btn-block" role="group">
        <button class="btn btn-danger" data-toggle="modal" data-target="#confirm-start">
            <span class="oi oi-play-circle"></span> {{ _("Start") }}
        </button>
        {% if is_start() %}
            <button class="btn btn-secondary" data-toggle="modal" data-target="#confirm-stop"
                    data-href="{{ url_for('root.switch_state') }}">
                <span class="oi oi-media-pause"></span> {{ _("Stop") }}
            </button>
        {% else %}
            <button class="btn btn-primary" data-toggle="modal" data-target="#confirm-continue"
                    data-href="{{ url_for('root.switch_state') }}">
                <span class="oi oi-media-play"></span> {{ _("Continue") }}
            </button>
        {% endif %}
    </div>
    <!-- start modal -->
    <div class="modal fade" id="confirm-start" tabindex="-1" role="dialog" aria-labelledby="confirmStartModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmStartModalLabel">
                        {{ _("Are you sure you want to start up a new competition?") }}
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="oi oi-delete"></span>
                    </button>
                </div>
                <form action="{{ url_for('root.start_competition') }}" method="post">
                    <div class="modal-body">
                        {{ form.csrf_token }}
                        {{ form.name.label(class="form-control-label") }}
                        {{ form.name(class="form-control") }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="oi oi-action-undo"></span> {{ _("Cancel") }}
                        </button>
                        <button class="btn btn-danger btn-confirm" id="submit" name="submit" type="submit">
                            <span class="oi oi-check"></span> {{ _("Confirm") }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- stop modal -->
    <div class="modal fade" id="confirm-stop" tabindex="-1" role="dialog" aria-labelledby="confirmStopModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmStopModalLabel"> {{ _("Stop Confirm") }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="oi oi-delete"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>{{ _("Are you sure you want to stop this competition?") }}</p>
                </div>
                <div class="modal-footer">
                    <form class="stop-form" method="post">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="oi oi-action-undo"></span> {{ _("Cancel") }}
                        </button>
                        <button class="btn btn-danger btn-confirm" type="submit">
                            <span class="oi oi-check"></span> {{ _("Confirm") }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- continue modal -->
    <div class="modal fade" id="confirm-continue" tabindex="-1" role="dialog"
         aria-labelledby="confirmContinueModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmContinueModalLabel">{{ _("Continue Confirm") }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="oi oi-delete"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>{{ _("Are you sure you want to continue this competition?") }}</p>
                </div>
                <div class="modal-footer">
                    <form class="continue-form" method="post">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="oi oi-action-undo"></span> {{ _("Cancel") }}
                        </button>
                        <button class="btn btn-danger btn-confirm" type="submit">
                            <span class="oi oi-check"></span> {{ _("Confirm") }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
